<template>
	<view>
		<TopNav title="收货地址" bg-color="#fff"></TopNav>
		<view class="main">
			<view class="bg-white radius p-tb8 p-lr10">
				<FormInput title="姓名" placeholder="收货人姓名" border="bottom" v-model="form.realname"></FormInput>
				<FormInput title="电话" placeholder="收货人手机号" border="bottom" v-model="form.mobile" class="m-t5">
				</FormInput>
				<FormSelect title="地区" placeholder="选择省 / 市 / 区" border="bottom" :value="area" class="m-t5"
					picker-title="请选择收货地区">
					<template v-slot:default="{data}">
						<CountyPicker v-model="area" :isConfirm="data" @input="handleAreaChange"></CountyPicker>
					</template>
				</FormSelect>
				<FormInput title="详细地址" placeholder="街道门牌、楼层房间号等信息" border="none" class="m-t5" v-model="form.address">
				</FormInput>
			</view>
			<view class="radius bg-white flex p-15 justify-between align-center m-t10">
				<text class="f-s14 line-height22 m-r12">设为默认收货地址</text>
				<u-switch size="20" v-model="form.is_default" :inactiveValue="0" :activeValue="1" activeColor="#FE3F59"
					inactiveColor="#B2B8C1"></u-switch>
			</view>
		</view>
		<view class="p-lr16 m-t30">
			<view class="self-btn full-width radius-26" hover-class="pressed" @click="handleAddAddress">
				<text>保存</text>
			</view>
			<view class="self-btn full-width radius-26 text-black m-t20" style="background-color: #fff;color: #222;"
				hover-class="pressed" @click="modalShow = true" v-if="form.id">
				<text>删除</text>
			</view>
		</view>
		<Modal :show.sync="modalShow" title="提示" content="你确认要删除该地址吗" @confirm="handleModalConfirm"></Modal>
		<Toast></Toast>
	</view>
</template>

<script>
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import CountyPicker from './components/county-picker.vue'
	import Modal from '@/components/modal/index.vue';
	import {
		addressUpdate,
		addressDelete,
		addressDetail
	} from "@/api/mine/shopping.js"
	export default {
		components: {
			Modal,
			FormSelect,
			FormInput,
			CountyPicker
		},
		data() {
			return {
				modalShow: false,
				area: '',
				form: {
					id: '',
					realname: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					address: '',
					is_default: 0
				}
			}
		},
		onLoad(query) {
			if (query.id) {
				this.getDetail(query.id)
			}
		},
		methods: {
			handleModalConfirm() {
				this.$modal.loading("正在删除").then(() => {
					addressDelete({
						id: this.form.id
					}).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg).then(() => {
							this.$tab.navigateBack()
						})
					}).catch(() => this.$modal.closeLoading())
				})

			},
			getDetail(id) {
				addressDetail({
					id
				}).then(res => {
					for (let key in this.form) {
						this.form[key] = res.data[key]
					}
					this.area = `${this.form.province}/${this.form.city}/${this.form.district}`
				})
			},
			handleAreaChange(area) {
				let areaList = area.split('/')
				this.form.province = areaList[0] || ''
				this.form.city = areaList[1] || ''
				this.form.district = areaList[2] || ''
			},
			handleDeleteAddress() {

			},
			handleAddAddress() {
				this.$modal.loading("正在保存").then(() => {
					addressUpdate(this.form).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
					})
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx;
	}

	::v-deep .self-formitem {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
</style>